<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品详情</title>
    <script src="js/jquery-3.6.3.min.js"></script>
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/bootstrap-theme.css">
    <script src="js/bootstrap.js"></script>
    <script>

        let start;
        let end;
        let duration = 0;
        let goods = JSON.parse(window.localStorage.getItem("goods"))

        $(function (){
            $("#name").text(goods.name)
            $("#price").text(goods.price/100.0+"元")
            $("#sold").text(goods.sold+"件")
            $("#count").text("已下架")
            if(goods.count>=0){
                $("#count").text(goods.count+"件")
            }
            $("#intro").text(goods.intro)
            $("#photo").attr("src", "/photo/"+goods.photo)
            start = new Date();

            $("#btnCart").click(
                function (){
                    if(goods==null){
                        return
                    }
                    if($("#cartCount").val()<1){
                        alert("不能少于0")
                        return;
                    }
                    $.ajax({
                            url: "/cart/add",
                            type: "post",
                            data: JSON.stringify({
                                "goodsid": goods.id,
                                "count": $("#cartCount").val()
                            }),
                            contentType: "application/json",
                            dataType: "json",
                            success: function (data) {
                                let r = data;
                                if (r.code === 1) {
                                    alert(r.data)
                                } else {
                                    alert(r.msg)
                                }
                            }
                        }
                    )
                }
            )

            $(window).bind("beforeunload", function(e) {
                end = new Date();//用户退出时间
                duration = end.getSeconds() - start.getSeconds();

                $.ajax({
                    url: "/goods/record",
                    type: "post",
                    data: JSON.stringify({
                        "goodsid": goods.id,
                        "time": duration
                    }),
                    dataType: "json",
                    contentType:"application/json",
                })
            });

            $("input").attr("autocomplete", "off")
        })

    </script>
</head>
<body>
    <div class="table-responsive">
        <div class="page-header">
            <h3>
                商品详情
            </h3>
        </div>
        <table class="table table-bordered table-striped">
            <thead>
            <tr>
                <td>商品名</td>
                <td>价格</td>
                <td>销量</td>
                <td>库存</td>
                <td>操作</td>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td><label id="name"></label></td>
                <td><label id="price"></label></td>
                <td><label id="sold"></label></td>
                <td><label id="count"></label></td>
                <td>
                    <input id="cartCount" value="1" type="number" min="1" step="1">
                    <button id="btnCart" class="btn-primary">加入购物车</button>
                </td>
            </tr>
            </tbody>
        </table>
        <table class="table table-bordered table-striped" style="width: 50%">
            <thead>
            <tr>
                <td>介绍</td>
                <td>图片</td>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td><div id="intro" style="width: 200px;height: 200px"></div></td>
                <td><img id="photo" src="" width="200" height="200"></td>
            </tr>
            </tbody>
        </table>
    </div>

</body>
</html>